<template>
  <div class="accountRecharge">
    <el-card>
      <!-- 搜索框 -->
      <div
        class="logSearch"
        style="font-size: 14px; color: #606266; font-weight: 800"
      >
        <span class="time"
          >时间：
          <el-date-picker
            v-model="logSeaData.time"
            type="date"
            size="small"
            style="width: 180px"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker
        ></span>
        &ensp; &ensp; &ensp;
        <span class="phone"
          >号码：<el-input
            v-model="logSeaData.phone"
            placeholder="请输入号码"
            size="small"
            style="width: 180px"
          ></el-input
        ></span>
        &ensp; &ensp; &ensp;
        <el-button size="small" type="primary" @click="getLogData()"
          >搜索</el-button
        >
      </div>
      <div class="LogTab" style="margin-top: 20px">
        <!-- 记录数据 -->
        <el-table :data="LogData.list" stripe border style="width: 100%">
          <el-table-column prop="phone" label="号码" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <div
                v-if="scope.row.status == 0"
                style="
                  display: inline-block;
                  border: 1px #67c23a solid;
                  width: 35px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  color: #2dd377;
                  background-color: rgba(231, 250, 240, 0.8);
                  font-size: 10px;
                  border-radius: 3px;
                "
              >
                正常
              </div>
              <div
                v-else
                style="
                  display: inline-block;
                  border: 1px #ffdddd solid;
                  width: 35px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  color: #ff4949;
                  background-color: rgba(255, 237, 237, 0.8);
                  font-size: 10px;
                  border-radius: 3px;
                "
              >
                风险
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ip" label="IP" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination" style="margin-top: 20px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.LogData.pageNum ? this.LogData.pageNum : 0"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="this.LogData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.LogData.total ? this.LogData.total : 0"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getLog } from "@/api/log";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      // 搜索条件
      logSeaData: {
        pageSize: 10,
        pageNum: 1,
        phone: "",
        time: "",
      },
      LogData: {},
    };
  },
  async created() {
    this.getLogData();
  },
  methods: {
    // 获取表格数据
    getLogData: debounce(async function () {
      let LogData = await getLog(this.logSeaData);
      if (LogData.code == 200) {
        this.$message({
          message: "查询成功",
          type: "success",
        });
        this.LogData = LogData.data;
      }
    }, 500),
    //表格分页
    async handleSizeChange(val) {
      this.logSeaData.pageSize = val;
      this.logSeaData.pageNum = 1;
      this.getLogData();
    },
    async handleCurrentChange(val) {
      this.logSeaData.pageNum = val;
      this.getLogData();
    },
  },
};
</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
<style lang="scss" scoped></style>
